<html>
<head>
<meta NAME="author" CONTENT="Peter Csizmadia">
<link REL ="stylesheet" TYPE="text/css" HREF="../../../marvinmanuals.css" TITLE="Style">
<title>MarvinView Example - Editable table</title>
</head>
<body onLoad="links_set_search(location.search)">

<h1>MarvinView Example - Editable table</h1>

To edit a molecule, double click on the container cell or select Edit > Structure from the pop-up
menu (right click with the mouse).
In the appearing <a href="../../../help/sketch/sketch-index.html">MarvinSketch window</a>,
the molecule can be altered with many available functions. When it is complete, the
MarvinSketch window can simply be closed and the molecule in the MarvinView cell will be
automatically updated.
<p>
You can also edit the data associated with a molecule:
<ol>
<li><em>Select</em> a molecule by clicking on it.</li>
<li>Press the &quot;Get molecule data&quot; button to load the molecule data to the text fields.</li>
<li>Change the name, the CAS number or the weight.</li>
<li>Press &quot;Set molecule data&quot; to update the data in the selected cell.</li>
</ol>

<p>

<center>
<script LANGUAGE="JavaScript1.1" SRC="../../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
function getsel() {
	if(document.MView != null) {
		var index = document.MView.getSelectedIndex();
		if(index < 0) {
			alert("Please select a molecule first.");
		} else {
			var name = document.MView.getL(5*index);
			var cas = document.MView.getL(5*index+2);
			var weight = document.MView.getL(5*index+4);
			document.MolForm.MolName.value = name;
			document.MolForm.MolCAS.value = cas;
			document.MolForm.MolWeight.value = weight;
		}
	} else {
		alert("Cannot get index of selected molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function setsel() {
	if(document.MView != null) {
		var index = document.MView.getSelectedIndex();
		if(index < 0) {
			alert("Please select a molecule first.");
		} else {
			var name = document.MolForm.MolName.value;
			var cas = document.MolForm.MolCAS.value;
			var weight = document.MolForm.MolWeight.value;
			document.MView.setL(5*index, name);
			document.MView.setL(5*index+2, cas);
			document.MView.setL(5*index+4, weight);
		}
	} else {
		alert("Cannot get index of selected molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
//marvin_jvm="builtin"
//marvin_gui="awt"
mview_name = "MView";
mview_begin("../../..", 501, 201);
mview_param("rows", "2");
mview_param("cols", "2");
mview_param("border", "1");
mview_param("background", "#ffffff");
mview_param("molbg", "#ffffff");
mview_param("editable", "2");
msketch_param("isMyTemplatesEnabled", "true");
msketch_param("queryAtoms", "");
msketch_param("atomStrings", "alias");
msketch_param("extraBonds", "arom,wedge");
mview_param("layout", ":5:3:"
+"M:0:0:5:1:nw:n:"
+"L:0:1:1:2:c:h:0:10:"
+"L:2:1:1:1:e:n:0:10:L:2:2:1:1:w:h:0:10:"
+"L:3:1:1:1:e:n:0:10:L:3:2:1:1:w:h:0:10");
mview_param("param", ":"
+"M:140:100:"
+"L:12b:"
+"L:10i:L:12:"
+"L:10i:L:12");
mview_param("cell0", "|../../../mols-2d/caffeine.csmol"
+"|Caffeine|CAS:|58-08-2|Weight:|194.19");
mview_param("cell1", "|../../../mols-2d/l-adrenaline.csmol"
+"|Adrenaline|CAS:|51-43-4|Weight:|183.21");
mview_param("cell2", "|../../../mols-2d/vitaminc.csmol"
+"|Vitamin C|CAS:|50-81-7|Weight:|176.13");
mview_param("cell3", "|../../../mols-2d/aspirin.csmol"
+"|Aspirin|CAS:|50-78-2|Weight:|180.16");
mview_end();
//-->
</script>
<p>
<form onSubmit="return false" NAME="MolForm">
<table CELLSPACING=5 CELLPADDING=0 BORDER=0>
<tr>
<td><input TYPE=BUTTON VALUE="Get molecule data" onClick="getsel()"></td>
<td>Name:</td><td><input TYPE=TEXT VALUE="" NAME="MolName"></td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>CAS:</td><td><input TYPE=TEXT VALUE="" NAME="MolCAS"></td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>Weight:</td><td><input TYPE=TEXT VALUE="" NAME="MolWeight"></td>
<td><input TYPE=BUTTON VALUE="Set molecule data" onClick="setsel()"></td>
</tr>
</table>
</form>
</center>

<p>

The query and update of the data for the selected molecule are handled by two
JavaScript functions:
<blockquote>
<pre>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot; <strong>SRC</strong>=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;<strong>&gt;</strong><strong>&lt;/script&gt;</strong>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot;<strong>&gt;</strong>
<strong>&lt;!--</strong>
function <strong>getsel()</strong> {
	if(document.MView != null) {
		var index = document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#getSelectedIndex()">getSelectedIndex();</a>
		if(index &lt; 0) {
			alert(&quot;Please select a molecule first.&quot;);
		} else {
			var name = document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#getL(int)">getL</a>(5*index);
			var cas = document.MView.getL(5*index+2);
			var weight = document.MView.getL(5*index+4);
			document.MolForm.MolName.value = name;
			document.MolForm.MolCAS.value = cas;
			document.MolForm.MolWeight.value = weight;
		}
	} else {
		alert(&quot;Cannot get index of selected molecule:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
function <strong>setsel()</strong> {
	if(document.MView != null) {
		var index = document.MView.getSelectedIndex();
		if(index &lt; 0) {
			alert(&quot;Please select a molecule first.&quot;);
		} else {
			var name = document.MolForm.MolName.value;
			var cas = document.MolForm.MolCAS.value;
			var weight = document.MolForm.MolWeight.value;
			document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setL(int, java.lang.String)">setL</a>(5*index, name);
			document.MView.setL(5*index+2, cas);
			document.MView.setL(5*index+4, weight);
		}
	} else {
		alert(&quot;Cannot get index of selected molecule:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
</pre>
</blockquote>
The applet tag begins like in the previous examples...
<blockquote>
<pre>
<strong>mview_name</strong> = &quot;MView&quot;;
<strong>mview_begin(</strong>&quot;../../..&quot;<strong>,</strong> 501<strong>,</strong> 201<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.rows">rows</a>&quot;<strong>,</strong> &quot;2&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cols">cols</a>&quot;<strong>,</strong> &quot;2&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.border">border</a>&quot;<strong>,</strong> &quot;1&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.background">background</a>&quot;<strong>,</strong> &quot;#ffffff&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.molbg">molbg</a>&quot;<strong>,</strong> &quot;#ffffff&quot;<strong>);</strong>
</pre>
</blockquote>
...but now we have a special parameter that enables editing of structures:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.editable">editable</a>&quot;<strong>,</strong> &quot;2&quot;<strong>);</strong>
</pre>
</blockquote>
Furthermore, we also specify some MarvinSketch parameters:
<blockquote>
<pre>
<strong>msketch_param(</strong>&quot;<a HREF="../../../help/developer/sketchman.html#parameters.queryAtoms">queryAtoms</a>&quot;<strong>,</strong> &quot;&quot;<strong>);</strong>
<strong>msketch_param(</strong>&quot;<a HREF="../../../help/developer/sketchman.html#parameters.atomStrings">atomStrings</a>&quot;<strong>,</strong> &quot;alias&quot;<strong>);</strong>
<strong>msketch_param(</strong>&quot;<a HREF="../../../help/developer/sketchman.html#parameters.extraBonds">extraBonds</a>&quot;<strong>,</strong> &quot;arom,wedge&quot;<strong>);</strong>
</pre>
</blockquote>
For editable data fields, it is important that the <em>fill</em> parameters in
the layout of the corresponding labels must be <em>h</em> (horizontal) or
<em>b</em> (both directions). Otherwise the initial data string would determine
the label size, and a longer string would not fit in the label component.
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.layout">layout</a>&quot;<strong>,</strong> &quot;:5:3:&quot;
+&quot;M:0:0:5:1:nw:n:&quot;
+&quot;L:0:1:1:2:c:h:0:10:&quot;
+&quot;L:2:1:1:1:e:n:0:10:L:2:2:1:1:w:h:0:10:&quot;
+&quot;L:3:1:1:1:e:n:0:10:L:3:2:1:1:w:h:0:10&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.param">param</a>&quot;<strong>,</strong> &quot;:&quot;
+&quot;M:140:100:&quot;
+&quot;L:12b:&quot;
+&quot;L:10i:L:12:&quot;
+&quot;L:10i:L:12"&quot;<strong>);</strong>
</pre>
</blockquote>
The initial contents of the cells are set with the <em>cell</em> parameters:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cell">cell0</a>&quot;<strong>,</strong> &quot;|../../../mols-2d/caffeine.csmol&quot;
+&quot;|Caffeine|CAS:|58-08-2|Weight:|194.19&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell1&quot;<strong>,</strong> &quot;|../../../mols-2d/l-adrenaline.csmol&quot;
+&quot;|Adrenaline|CAS:|51-43-4|Weight:|183.21&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell2&quot;<strong>,</strong> &quot;|../../../mols-2d/vitaminc.csmol&quot;
+&quot;|Vitamin C|CAS:|50-81-7|Weight:|176.13&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell3&quot;<strong>,</strong> &quot;|../../../mols-2d/aspirin.csmol&quot;
+&quot;|Aspirin|CAS:|50-78-2|Weight:|180.16&quot;<strong>);</strong>
<strong>&lt;/script&gt;</strong>
</pre>
</blockquote>
The form used to change molecule data is the following:
<blockquote>
<pre>
<strong>&lt;form onSubmit</strong>="return false" <strong>NAME</strong>="MolForm"<strong>&gt;</strong>
<strong>&lt;table CELLSPACING</strong>=5 <strong>CELLPADDING</strong>=0 <strong>BORDER</strong>=0<strong>&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Get molecule data" <strong>onClick</strong>="getsel()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;</strong>Name:<strong>&lt;/td&gt;&lt;td&gt;&lt;input TYPE</strong>=TEXT <strong>VALUE</strong>="" <strong>NAME</strong>="MolName"<strong>&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td&gt;&lt;/td&gt;&lt;td&gt;</strong>CAS:<strong>&lt;/td&gt;&lt;td&gt;&lt;input TYPE</strong>=TEXT <strong>VALUE</strong>="" <strong>NAME</strong>="MolCAS"<strong>&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td&gt;&lt;/td&gt;&lt;td&gt;</strong>Weight:<strong>&lt;/td&gt;&lt;td&gt;&lt;input TYPE</strong>=TEXT <strong>VALUE</strong>="" <strong>NAME</strong>="MolWeight"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Set molecule data" <strong>onClick</strong>="setsel()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;/table&gt;</strong>
<strong>&lt;/form&gt;</strong>
</pre>
</blockquote>

<p>
<center><div class="lenia">&nbsp;</div></center>
<p>
<!--The next example shows how to
<a HREF="selection.html">select atoms</a> in the viewer.-->
The next example shows how to
<a HREF="colorsets.html">color atomsets</a> in the viewer.


</body>
</html>
